<template>
  <div class="allInfos">
    <div class="title">信息大全</div>
    <div class="infosItem">
      <div
        class="evInfos"
        v-for="(item, index) in loserInfos"
        :key="index"
        @click="goDetail(item)"
      >
        <div class="top"><img :src="item.l_photos" alt="" /></div>
        <div class="bottom">
          <div>姓名：{{ item.l_name }}</div>
          <div>性别：{{ item.l_sex }}</div>
          <div>住址：{{ item.l_birth_addr }}</div>
          <!-- <div>联系电话：{{item.linkmans[0].m_phone}}</div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { getAllLosers } from "@/server/loser";

const router = useRouter();
const loserInfos = ref<any>([]);
const total = ref(0);

onMounted(async () => {
  await getLoserList();
});
const getLoserList = () => {
  getAllLosers().then((res: any) => {
    loserInfos.value = res.data.filter((item: any) => item.state == 1);
  });
};
const goDetail = (item: any) => {
  router.push({
    path: "/LoserDetail",
    query: {
      id: item.id,
    },
  });
};
</script>

<style lang="less" scoped>
.allInfos {
  width: 80%;
  margin: 0 auto;
  margin-bottom: 100px;
  .title {
    // background-color: pink;
    text-align: center;
    margin: 20px 0;
    padding: 10px;
    font-size: 28px;
    letter-spacing: 10px;
  }
  .infosItem {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-column-gap: 30px;
    grid-row-gap: 50px;
    justify-content: center;
    .evInfos {
      width: 220px;
      white-space: nowrap;
      overflow: hidden;
      border-radius: 5px;
      // padding: 5px;
      border: 1px solid rgb(205, 198, 198);
      // box-shadow: 0 0 20px 0 rgb(218, 202, 202);
      .top {
        width: 220px;
        height: 220px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .bottom {
        font-size: 16px;
        padding: 10px;
      }
    }
  }
}
</style>
